<template>
  <div class="category">
    <div class="search" @click="tosearch">
      <div class="ser">
        <span class="icon"></span>
        <span>商品搜索,共239款好物</span>
      </div>

    </div>
    <div class="content">
      <scroll-view class="left" scroll-y="true" >
        <div class="iconText" @click="selectitem(item.objectId,index)" v-for="(item, index) in listData" :class="[index==nowIndex?'active':'']" :key="index">          
          {{item.name}}
        </div>
      </scroll-view>
      <scroll-view class="right" scroll-y="true" :scroll-into-view="scroll_index" >
        <!-- <div class="banner">
          <img :src="detailData.banner_url" alt="">
        </div> -->
        <div v-for="(cateitem,index) in listData" :key="index" :id="'f1'+cateitem.objectId" class="cateItem">
            <div class="title">
              <span>—</span>
              <span>{{cateitem.name}}分类</span>
              <span>—</span>
            </div>
            <div class="bottom" >
              <div @click="categoryList(good.objectId)" v-for="(good,gindex) in cateitem.goods" :key="gindex"  class="item">
                <img :src="good.imageList[0].url" mode='aspectFill' alt="">
                <span>{{good.name}}</span>
              </div>
            </div>
        </div>
      </scroll-view>
    </div>
  </div>
</template>

<script>
import { get } from "../../utils";
export default {
  created() {},
  mounted() {
    //获取列表数据
    this.getListData();
    //获取默认右侧数据
    // this.selectitem(this.id, this.nowIndex);
  },
  data() {
    return {
      id: "1005000",
      nowIndex: 0,
      listData: [],
      detailData: {},
      select_index:'',
      scroll_index:'',
    };
  },
  // computed:{
  //   listData:function(){

  //   }
  // },
  components: {},
  methods: {
    tosearch() {
      wx.navigateTo({ url: "/pages/search/main" });
    },
    selectitem(id, index) {

       this.nowIndex = index
       this.select_index = index
       this.scroll_index = 'f1'+id
       console.log(this.scroll_index)
      // const data = await get("/category/currentaction", {
      //   id: id
      // });
      // this.detailData = data.data.currentOne;
    },
    async getListData() {
      //const data = await get("/category/indexaction");//
      var data = {}
      //  if()
      try {
        data = wx.getStorageSync('goodsgroup')
        if (data) {
          // Do something with return value
          console.log('获取到本地的商品数据了')
          console.log(data)
          this.listData = data;
        }else{
          data = await get("/goodsgroup");
          if(data){
            let ndata = []
            data.forEach(element => {
              if(element.goods.length>0){
                ndata.push(element)
              }
            });
            console.log('更新了ndata',ndata)
            this.listData = ndata;
            wx.setStorage({
              key:'goodsgroup',
              data:ndata
            })
            
          }
          
        }
      } catch (e) {
        // Do something when catch error
          throw '获取数据错误！'+error.toString();
      }
      // const 

      // this.listData = data.categoryList;
    },
    categoryList(id) {
      console.log("tiaozhuan");

      // wx.navigateTo({
      //   url: "../categorylist/main?id=" + id
      // });
      console.log(id)
      wx.navigateTo({
        url: "/pages/goods/main?id=" + id
      });
    }
  },
  computed: {}
};
</script>
<style lang='scss' scoped>
@import "./style";
</style>
